import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import { proRecommendGoods } from "@/api/api";
import { useUserInfoStore } from "../stores/userInfo";
import { showConfirmDialog } from "vant";

interface ICarItem {
  proid: string;
  checked: boolean;
  img: string;
  proname: string;
  originprice: number;
  goodsNum: number;
}
interface IRecommendGoodsItem {
  proid: string;
  img1: string;
  proname: string;
  originprice: number;
}
interface IApiRecomm {
  code: string;
  data: IRecommendGoodsItem[];
}

export const useCarGoodsList = () => {
  const store = useUserInfoStore();
  const goodsNum: Ref<number> = ref(0);
  const goodsList: Ref<ICarItem[]> = ref([]);
  const recommendGoodsList: Ref<IRecommendGoodsItem[]> = ref([]);
  const checkedAll: Ref<boolean> = ref(false);
  const goodsTotalPrice: Ref<number> = ref(0);

  const onSubmit = () => {
    console.log("onSubmit");
  };

  // 获取推荐数据
  const getRecommend = async () => {
    const res = (await proRecommendGoods({
      count: 1,
      limitNum: 12,
    })) as unknown as IApiRecomm;
    if (res.code === "200") {
      recommendGoodsList.value = res.data;
    }
  };

  // 计算价格 改变商品数量的时候计算价格
  const changeGoodsNum = () => {
    goodsTotalPrice.value = 0;
    goodsList.value.forEach((v) => {
      goodsTotalPrice.value += (v.originprice * v.goodsNum * 100) as number;
    });
  };

  const initPage = () => {
    // 从store仓库中将购物车中的数据取出并赋值给页面上goodsList变量
    goodsList.value = store.getGoodsList;
    // 数据有选中或者不选中的状态，那么需要判断当前的数据是否全部被勾选了，如果全被勾选，那么最底下的全选按钮就需要被勾选，如果有一个没有被勾选，那么全选按钮就不勾选
    checkedSelect();
    countGoodsPrice();
    goodsNum.value = goodsList.value.length;
  };

  // 计算所有商品的价格
  const countGoodsPrice = () => {
    // 首先把商品总价记为0
    goodsTotalPrice.value = 0;
    // 然后循环所有数据，把所有商品的价格加起来计算总和
    goodsList.value.forEach((v) => {
      if (v.checked) goodsTotalPrice.value += v.originprice * v.goodsNum * 100;
    });
  };

  // 让全选按钮和单个数据联动
  const checkedSelect = () => {
    // 排它法
    // 首先假设数据都被勾选了，于是直接给checkedAll变为true
    checkedAll.value = true;
    // 然后再去循环真实的数据，一旦有一个数据没有被勾选，那么直接把checkedAll变成false
    console.log(goodsList.value);
    
    goodsList.value.forEach((v) => {
      if (!v.checked) {
        checkedAll.value = false;
        return false;
      }
    });
  };

  // 点击全选的时候触发
  const changeCheckAll = () => {
    goodsList.value.forEach((v) => {
      v.checked = checkedAll.value;
    });
  };

  // 点击购物车内单个数据的勾选框时触发
  const changeItem = (checked: boolean) => {
    // checked如果是false，说明有一个选项被取消了，那么直接把chechedAll变成false就好；如果checked是true，说明当前这一项被选中了，那么就需要考虑是否其他的选项也被选中了，其他选项中但凡有一个false，checkedAll就只能是false，如果全部是true，那么checkedAll就得变成true
    !checked ? (checkedAll.value = false) : checkedSelect();
    // if (!checked) {
    //   checkedAll.value = false;
    // } else {
    //   checkedSelect();
    // }
    countGoodsPrice();
  };

  // 删除商品
  const delGoodsItem = (id: string) => {
    showConfirmDialog({
      title: "确认操作",
      message: "删除后商品将从购物车中消失，是否确认删除？",
    })
      .then(() => {
        store.setGoodsListItem(id);
        initPage();
        checkedAll.value = !(goodsNum.value === 0);
      })
      .catch(() => {
        // on cancel
        console.log("取消删除");
      });
  };

  onMounted(() => {
    // 初始化购物车内容
    initPage();
    // 获取推荐商品的内容
    getRecommend();
  });

  return {
    goodsNum,
    goodsList,
    recommendGoodsList,
    checkedAll,
    goodsTotalPrice,
    onSubmit,
    changeGoodsNum,
    changeCheckAll,
    changeItem,
    delGoodsItem,
  };
};
